<!DOCTYPE html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Floating label Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        /* CSS styles */
        /* Example by Matthias Benkort at http://codepen.io/KtorZ/pen/ZOzdqG */
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
        body{
           
            background: linear-gradient(to  right, #073c8a 0%, #d923ac 100%);
        }
        body:hover{
            background: linear-gradient(to  right, #092b5e 0%, #b91390 100%);
        }
        .container {
            display: flex;
            background: linear-gradient(to  right, black 0%, rgb(94, 91, 91) 100%);
            color: whitesmoke !important;
            align-items: center;
            justify-content: center;
            border-radius: 30%;
        }
        .container:hover{
            width: 220px;
            height: 450px;
            background: black;
        }
        .box:hover{
            width: 250px;
            height: 470px;
            background: black;
        }
        .wrapper {
            flex-direction: column;
            margin-top: 80px;
        }
        .material-textfield {
            height: 6rem;
            position:static;
            align-items:center;
        }

        .material-textfield input {
            background: none;
            border: none;
            box-sizing: border-box;
            display: block;
            font-family: Roboto, Arial, sans-serif;
            font-size: 1rem;
            padding: 0.25rem 0.1rem;
            width: 100%;
        }

        .material-textfield input:invalid {
            box-shadow: none;
        }

        .material-textfield input:focus {
            outline: none;
        }

        .material-textfield label {
            display: inline-block;
            font-family: Roboto, Arial, sans-serif;
            font-size: 0;
            pointer-events: none;
            position: relative;
            text-transform: uppercase;
            width: 100%;
        }

        .material-textfield label::before {
            content: attr(data-content);
            position: relative;
            transition: all 0.2s ease;
            will-change: font-size, top;
        }

        .material-textfield label::after {
            bottom: 0.9rem;
            content: "";
            height: 0.3rem;
            left: 50%;
            position: absolute;
            transition: all 0.2s ease;
            width: 0;
            will-change: width, left;
        }

        .material-textfield label::before,
        .material-textfield input[required]:focus~label::before {
            font-size: 0.75rem;
            top: -3.25rem;
        }

        .material-textfield input:focus~label::after {
            left: 0%;
            width: 100%;
        }

        .material-textfield input:invalid~label::before {
            font-size: 1rem;
            top: -2rem;
        }

        .material-textfield.blue input {
            border-bottom: 0.1rem solid #03A9F4;
            color: #0275a8;
            
        }

        .material-textfield.blue label::after {
            background: linear-gradient(to  right, #0066ff 0%, #ff33cc 100%);
        }

        .material-textfield.blue label::before,
        .material-textfield.blue input[required]:focus~label::before {
            color: #47c4fd;
            
        }

        .material-textfield.blue input:invalid~label::before {
            color: #03A9F4;
        }

        .material-textfield.red input {
            border-bottom: 0.1rem solid #F44336;
            color: #d2190b;
        }

        .material-textfield.red label::after {
            background: #F44336;
        }

        .material-textfield.red label::before,
        .material-textfield.red input[required]:focus~label::before {
            color: #f8877f;
        }

        .material-textfield.red input:invalid~label::before {
            color: #F44336;
        }
      
      .box {
        position: fixed;
        top: 25%; 
        left: 40%; 
        width: 20%; 
        height: 50%; 
        background: linear-gradient(to  right, black 0%, rgb(94, 91, 91) 100%);
        border: 3px solid #89898c;
        z-index: 9999; 
        color: whitesmoke;
        border-radius: 10%;
    }
    
      .button-box {
          width: 200px;
          height: 30px;
          background: linear-gradient(to bottom, #3498db, #2980b9);
          border: 1px solid #2980b9;
          border-radius: 10px;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
          text-align: center;
          
      }

      .button-box a {
          text-decoration: none;
          color: white;
          font-size:25px;
          font-weight: bold;
          font-family:Arial, Helvetica, sans-serif;
          align-items: center;

      }

      .button-box:hover {
          transform: translateY(-5px);
          background-color: antiquewhite;

      }
    </style>

</head>

<body>
    <div class="box"style="width: 300px;">
    <div class="container" >
        <div class="wrapper">
            <div class="material-textfield blue" style="padding: 10px; text-align: center;">
                <input type="text" required />
                <label data-content="username" >username</label>
            </div>
            <div class="material-textfield red" style="padding: 10px; text-align: center;">
                <input type="password" required />
                <label data-content="password">password</label>
            </div>
            <div class="button-box" style="align-items: center;">
              <a href="#">SUBMIT</a>
          </div>
        </div>
      </div>
    </div>
</body>

</html>
